@import '../../styles/variables.scss';

.tag-selector {
  margin-top: 60rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
  
  .tag-item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 136rpx;
    height: 70rpx;
    opacity: 1;
    border-radius: 8rpx;
    border: 2.8px solid $text-color;
    background: $white;
    
    text {
      font-size: 36rpx;
      font-weight: 400;
      color: $text-color;
    }
    
    &.tag-square {
      transform: rotate(-3.91deg);
    }
    
    &.tag-oval {
      transform: rotate(6.19deg);
    }
    
    &.tag-triangle {
      transform: rotate(-2.11deg);
    }
    
    &.tag-active {
      background: linear-gradient(0deg, $primary-color, $primary-color), $white;
    }
  }
}